<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新增钉钉配置</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        /* 基础布局样式（与短信模板页面一致） */
        .mainBox { padding: 15px; }
        .main-container { max-width: 800px; margin: 0 auto; }
        .layui-form-item { margin-bottom: 22px; }
        /* 提示文本样式 */
        .form-tip { 
            display: block; 
            margin-top: 8px; 
            color: #666; 
            font-size: 12px; 
            line-height: 1.5;
        }
        .form-tip i { color: #1E9FFF; margin-right: 4px; }
        /* 示例容器 */
        .example-box { 
            margin-top: 8px; 
            padding: 10px; 
            background: #f8f8f8; 
            border-radius: 4px; 
            border: 1px solid #eee; 
            font-family: monospace; 
            font-size: 12px; 
            color: #333;
            white-space: pre-wrap;
            word-break: break-all;
        }
        /* 底部按钮区域 */
        .bottom { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            padding: 15px; 
            background: #fff; 
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05); 
            z-index: 99;
        }
        .button-container { text-align: center; }
        .button-container button { margin: 0 10px; }
    </style>
</head>

<body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <!-- 1. 配置名称（必填，唯一） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">配置名称 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="name" 
                               id="name" 
                               lay-verify="required|verifyName" 
                               autocomplete="off" 
                               placeholder="请输入配置名称（如：运营通知机器人）" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            配置名称为唯一标识，不可重复，建议包含用途（如“订单通知”“告警提醒”）
                        </span>
                    </div>
                </div>

                <!-- 2. 机器人Token（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">机器人Token <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="access_token" 
                               id="access_token" 
                               lay-verify="required|verifyToken" 
                               autocomplete="off" 
                               placeholder="请输入钉钉机器人Webhook中的Token" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            Token从钉钉机器人Webhook地址中提取（格式：https://oapi.dingtalk.com/robot/send?access_token=XXX）
                        </span>
                        <div class="example-box">
Token提取示例：
Webhook地址：https://oapi.dingtalk.com/robot/send?access_token=abcdef1234567890abcdef1234567890
提取的Token：abcdef1234567890abcdef1234567890
                        </div>
                    </div>
                </div>

                <!-- 3. 加签密钥 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">加签密钥 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="secret" 
                               id="secret" 
                               lay-verify="required|verifySecret" 
                               autocomplete="off" 
                               placeholder="开启加签时填写" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            仅当钉钉机器人开启“加签”安全设置时需要填写，从机器人配置页获取 如 SEC8716xxxxxx
                        </span>
                    </div>
                </div>

                <!-- 4. 描述说明（非必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">描述说明</label>
                    <div class="layui-input-block">
                        <textarea name="description" 
                                  id="description" 
                                  autocomplete="off" 
                                  placeholder="请输入配置用途（如：用于发送订单支付成功通知）" 
                                  class="layui-textarea" 
                                  rows="3"></textarea>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            详细描述便于团队协作，建议说明机器人用途、使用场景
                        </span>
                    </div>
                </div>
                <!-- 5. 模板状态（单选，默认开启） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板状态 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="开启" lay-skin="tag" checked>
                        <input type="radio" name="is_active" value="0" title="关闭" lay-skin="tag">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            关闭状态的模板无法用于发送短信
                        </span>
                    </div>
                </div>
                <!-- 6. 排序号（默认0，非负整数） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="number" 
                               name="sort_num" 
                               id="sort_num" 
                               lay-verify="verifySort" 
                               lay-affix="number"
                               autocomplete="off" 
                               value="0" 
                               placeholder="数字越大，列表中显示越靠前" 
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮区域（与短信模板页面一致） -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" 
                        lay-submit lay-filter="dingtalk-config-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm" id="reset-btn">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" id="close-btn">
                    <i class="layui-icon layui-icon-close"></i>
                    取消
                </button>
            </div>
        </div>
    </form>

    <!-- 引入依赖JS文件（路径与短信模板页面一致） -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 1. 基础配置（对接钉钉配置后端接口）
            const API_BASE_URL = apiConfig.baseUrl;
            const TOKEN = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const DINGTALK_CONFIG_API = `${API_BASE_URL}/dingding/dingtalk/`; // 钉钉配置接口地址

            // 2. 表单自定义校验规则（适配钉钉配置字段）
            form.verify({
                // 配置名称：非空+长度1-50+去空格
                verifyName: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return "配置名称不能为空";
                    if (trimVal.length > 100) return "配置名称长度不能超过100个字符";
                },
                // 机器人Token：非空+格式校验（32-64位字母数字）
                verifyToken: function (value) {
                    const trimVal = value.trim();
                    const reg = /^[a-zA-Z0-9]{32,64}$/; // 钉钉Token通常为32/64位字母数字
                    if (!reg.test(trimVal)) {
                        return "Token格式错误，仅支持32-64位字母或数字";
                    }
                },
                // 加签密钥：格式校验（40位字母数字，钉钉加签密钥固定40位）
                verifySecret: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return; // 非必填，空值直接通过
                    const reg = /^[a-zA-Z0-9]{100}$/; // 钉钉加签密钥固定100位
                    if (trimVal.length > 100) return "配置名称长度不能超过100个字符";
                },
                // 排序号：非负整数
                verifySort: function (value) {
                    const num = parseInt(value);
                    if (isNaN(num) || num < 0 || num > 9999) {
                        return "排序号需为0-9999之间的非负整数";
                    }
                }
            });

            // 3. 表单提交事件（新增钉钉配置）
            form.on('submit(dingtalk-config-save)', function (data) {
                // 处理表单数据：转换整数类型、去空格
                let formData = {
                    ...data.field,
                    name: data.field.name.trim(),
                    access_token: data.field.access_token.trim(),
                    secret: data.field.secret.trim(),
                };

                // 发送新增请求
                const loading = layer.load(2, { shade: 0.3, shadeClose: false });
                $.ajax({
                    url: DINGTALK_CONFIG_API,
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'POST',
                    headers: { "Authorization": TOKEN },
                    success: function (result) {
                        layer.close(loading);
                        if (result.success || result.code === 200) {
                            layer.msg(result.message || "钉钉配置新增成功", {
                                icon: 1,
                                time: 1000
                            }, function () {
                                // 关闭弹窗并刷新父页面表格（与短信模板逻辑一致）
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 提取错误信息（适配后端返回格式）
                            let errorMsg = result.message || "新增失败，请重试";
                            if (result.data && typeof result.data === 'object') {
                                const firstKey = Object.keys(result.data)[0];
                                firstKey && (errorMsg = result.data[firstKey][0]);
                            }
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function () {
                        layer.close(loading);
                        layer.msg("网络请求异常，请检查接口或网络", { icon: 2, time: 2000 });
                    }
                });

                return false; // 阻止默认提交
            });

            // 4. 取消按钮事件：关闭弹窗（与短信模板一致）
            $('#close-btn').on('click', function() {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            // 5. 重置按钮事件：重置后重新渲染表单（解决单选框样式异常）
            $('#reset-btn').on('click', function() {
                setTimeout(function() {
                    form.render();
                }, 100);
            });
        });
    </script>
</body>
</html>